
import { Router } from '@angular/router';

import { Component, OnInit } from '@angular/core';
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumberRange } from "scichart/Core/NumberRange";
import { Point } from "scichart/Core/Point";
import { EAnimationType } from "scichart/types/AnimationType";
import { ShadowEffect } from "scichart/Charting/Visuals/RenderableSeries/ShadowEffect";
import { SciChartJSLightTheme } from "scichart/Charting/Themes/SciChartJSLightTheme";
import { SciChartJSDarkTheme } from "scichart/Charting/Themes/SciChartJSDarkTheme";


@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.less']
})
export class ChartComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.initSciChart();
  }

  gotoDashBoard() {
    this.router.navigateByUrl('/main/dashboard');
  }

  async initSciChart() {
    // Create a SciChartSurface
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(
      'scichart-root-id'
    );
    const xAxis = new NumericAxis(wasmContext);
    xAxis.autoTicks = false;
    xAxis.majorDelta = 10;
    xAxis.minorDelta = 1; 

    sciChartSurface.xAxes.add(xAxis);
    sciChartSurface.yAxes.add(
      new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) })
    );

    // Create some xValues, yValues arrays
    const xValues = Array.from({ length: 800 }, (x, i) => i);
    const yValues = xValues.map((x) => Math.sin(x * 0.1));

    // Create and add a line series to the chart
    sciChartSurface.renderableSeries.add(
      new FastLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
        stroke: "#ff6600",
        strokeThickness: 2,
        onSelectedChanged: (sourceSeries, isSelected) => {
          console.log("onSelectedChanged");
        },
        onHoveredChanged: (sourceSeries, isHovered) => {
          console.log("onHoveredChanged");
        }

      })
    );

    // OPTIONAL: Add some interactivity modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier());
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());

    // Zoom to fit
    sciChartSurface.zoomExtents();

    return { sciChartSurface, wasmContext };
  }

}
